
<template>
  <div>
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item><b>物品领取</b></el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <!--搜索工具  -->
  <div style="margin:40px 20px 20px 20px">
    <el-form :inline="true" ref="searchFormRef" :model="searchFormModel" class="demo-form-inline" style="margin-top: 20px">
      <el-form-item label="领取状态" prop="receiveStatus">
        <el-select
            v-model="searchFormModel.receiveStatus"
            placeholder="领取状态"
            clearable  style="width:160px">
          <el-option label="已领取" value="已领取"></el-option>
          <el-option label="未领取" value="未领取"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchOnSubmit">
          <el-icon><Search /></el-icon>  查询
        </el-button>
      </el-form-item>
    </el-form>
  </div>
  <!--  数据表格-->
  <div style="margin:20px">
    <el-table :data="goodsInfo" stripe border style="width: 100%">
      <el-table-column prop="sid" label="学号" />
      <el-table-column prop="sname" label="姓名" />
      <el-table-column prop="gender" label="性别" />
      <el-table-column prop="cardid" label="卡号" />
      <el-table-column prop="dept" label="所属学院" :formatter="attributeFormatter"/>
      <el-table-column prop="detail" label="物品类型" />
      <el-table-column prop="receiveDt" label="领取时间"/>
      <el-table-column prop="receiveStatus" label="报到状态"  />
    </el-table>
  </div>
  <!--  分页-->
  <div class="page">
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[8,10]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="sizes, prev, pager, next"
        :total="totals"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>
<script setup>

import {ArrowRight, Plus, Search} from "@element-plus/icons-vue";
import {onMounted, reactive, ref} from "vue";
import request from "../../../utils/freshman";
onMounted(()=>{
  info();
  getGoods();
  getDept();
})
//对应的值
const deptValue=ref([]);
const getDept=()=>{
  request({
    url:'/dept/all',
    method:'get'
  }).then((req)=>{
    console.log(req)
    if (200==req.data.errorCode){
      deptValue.value=req.data.data;
    }
  })
}
const attributeFormatter=(row, column, cellValue)=> {
  for (let i=0;i<deptValue.value.length;i++){
    if (cellValue== deptValue.value[i].deptid){
      return deptValue.value[i].deptname
    }
  }
}
//分页
const currentPage = ref(1)
const pageSize = ref(8)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
let totals=ref(0);
const goodsInfo=ref([])
const userInfo=reactive({
  'tid':'',
  'dept':''
})
const info=()=>{
  //从sessionstorage取出数据
  const loginUser=sessionStorage.getItem("loginUser");
  if (loginUser){
    //更新userInfo.username
    const userobj=JSON.parse(loginUser)
    userInfo.tid=userobj.tid;
    userInfo.dept=userobj.dept;
  }
}
//搜索
const searchFormRef=ref();
const searchFormModel=reactive({
  receiveStatus:'',
})

const getGoods=()=>{
  const params = {
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    // 初始时不包含其他参数
  };
  if (searchFormModel.receiveStatus && searchFormModel.receiveStatus.trim() !== ''){
    params.receiveStatus=searchFormModel.receiveStatus.trim();
  }
  if (userInfo.dept != null){
    params.dept=userInfo.dept
  }
  request({
    url:'/goods/all',
    method:'get',
    params,
  }).then((req)=>{
    console.log(req)
    if (200==req.data.errorCode){
      goodsInfo.value=req.data.data.records;
      totals.value=req.data.data.total;
    }
  })
}
const searchOnSubmit=()=>{
  getGoods()
}
const handleSizeChange = (val) => {
  pageSize.value=val;
  getGoods()
}
const handleCurrentChange = (val) => {
  currentPage.value=val;
  getGoods()
}
</script>
<style scoped>
.el-breadcrumb{
  font-size: 18px;
  margin: 20px;
}
.page{
  margin-left: 30%;
}
</style>